<template>
  <div class="box">
    <div class="title">欢迎用户注册账号</div>
    <el-card v-loading="loading" style="width: 600px">
      <el-form
        ref="patientFormRef"
        :model="patientForm"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model="patientForm.username"
            :readonly="!!patientForm.id"
            placeholder="请输入登录账号"
          />
        </el-form-item>

        <el-form-item label="用户昵称" prop="nickname">
          <el-input
            v-model="patientForm.nickname"
            placeholder="请输入用户昵称"
          />
        </el-form-item>

        <el-form-item label="性别" prop="gender">
          <dictionary v-model="patientForm.gender" type-code="gender" />
        </el-form-item>

        <el-form-item label="手机号码" prop="mobile">
          <el-input
            v-model="patientForm.mobile"
            placeholder="请输入手机号码"
            maxlength="11"
          />
        </el-form-item>

        <el-form-item label="邮箱" prop="email">
          <el-input
            v-model="patientForm.email"
            placeholder="请输入邮箱"
            maxlength="50"
          />
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input
            v-model="patientForm.password"
            type="password"
            placeholder="请输入密码"
            show-password
          />
        </el-form-item>
        <el-form-item label="再次输入密码" prop="tPassword">
          <el-input
            v-model="patientForm.tPassword"
            type="password"
            placeholder="再次输入密码"
            show-password
          />
        </el-form-item>

        <div style="display: flex; justify-content: center">
          <el-button type="primary" @click="handleSubmit">注 册</el-button>
          <el-button type="info" style="margin-left: 60px" @click="handleCancel"
            >取 消</el-button
          >
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { UserForm } from "@/api/user/types";
import { registerUser } from "@/api/user";
import router from "@/router";

// 用户表单数据
const patientForm = reactive<UserForm>({
  status: 1,
});
const patientFormRef = ref();
const loading = ref(false);
// 校验规则
const rules = reactive({
  username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
  nickname: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
  password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
  tPassword: [{ required: true, message: "密码不能为空", trigger: "blur" }],
  email: [
    {
      pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
      message: "请输入正确的邮箱地址",
      trigger: "blur",
    },
  ],
  mobile: [
    {
      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      message: "请输入正确的手机号码",
      trigger: "blur",
    },
  ],
});

const handleSubmit = useThrottleFn(() => {
  patientFormRef.value.validate((valid: any) => {
    if (valid) {
      loading.value = true;
      registerUser(patientForm)
        .then(() => {
          ElMessage.success("注册成功");
          router.push("/login");
        })
        .finally(() => (loading.value = false));
    }
  });
}, 3000);

const handleCancel = () => {
  ElMessage.warning("取消注册");
  router.push("/login");
};
</script>

<style scoped lang="scss">
.box {
  height: 100vh;
  .title {
    margin-top: 100px;
    width: 100%;
    text-align: center;
    padding: 20px;
    font-size: 30px;
    color: #04395e;
  }
}
</style>
